<template>
  <div>
    <Layout />
    <el-container class="app-item-contain">
      <el-header class="align-center">
        <h1>{{ "答卷" }}</h1>
        <div>
          <span class="question-title-padding">试卷总分：{{ totalScore }}</span>
        </div>
      </el-header>
      <el-main>
        <el-form
          :model="form"
          ref="form"
          v-loading="formLoading"
          label-width="100px"
        >
          <el-row :key="index" v-for="(item, index) in form.records">
            <br />
            <QuestionEdit :index="index + 1" :answer="item" />
          </el-row>
          <br/>
          <br/>
      <el-form-item style="display: flex;justify-content: center;">
        <el-button type="primary" @click="submitAll">提交总分</el-button>
      </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import { formatSeconds } from "@/utils";
import QuestionEdit from "../components/QuestionEdit";
import Layout from "@/layout";
import { autoGenerate, getAllPapers } from "@/api/autoGenerate";
import { getExams, getScores, getAnswers, getScore } from "@/api/exam";

export default {
  components: { QuestionEdit, Layout },
  data() {
    return {
      formLoading: false,
      timer: null,
      form: {
        records: [],
      },
    };
  },
  created() {
    let examId = this.$route.query.examId;
    let studentId = this.$route.query.studentId;
    let _this = this;

    if (
      examId &&
      studentId &&
      parseInt(studentId) !== 0 &&
      parseInt(examId) !== 0
    ) {
      _this.formLoading = true;
      getAnswers({ studentId, examId, current: 1, size: 100 })
        .then((res) => {
          console.log("res", res);
          if (!res.records) {
            _this.$alert("id错误", {
              confirmButtonText: "返回首页",
              callback: (action) => {
                _this.$router.push("/paper");
              },
            });
          } else {
            _this.form.records = res.records;
            _this.formLoading = false;
          }
        })
        .catch((e) => {
          _this.$alert("出现未知错误", {
            confirmButtonText: "返回首页",
            callback: (action) => {
              _this.$router.push("/paper");
            },
          });
        });
    } else {
      _this.$alert("id错误", {
        confirmButtonText: "返回首页",
        callback: (action) => {
          _this.$router.push("/paper");
        },
      });
    }
  },
  mounted() {},
  beforeDestroy() {
    window.clearInterval(this.timer);
  },
  methods: {
    submitAll() {
      console.log(getScore);
      let examId = this.$route.query.examId;
      let studentId = this.$route.query.studentId;
      let _this = this;

      if (
        examId &&
        studentId &&
        parseInt(studentId) !== 0 &&
        parseInt(examId) !== 0
      ) {
        _this.formLoading = true;

        getScore({ studentId, examId })
          .then((res) => {
            console.log("res", res);

              _this.$alert("提交成功", {
                confirmButtonText: "返回首页",
                callback: (action) => {
                  _this.$router.push("/paper");
                },
              });
              _this.formLoading = false;

          })
          .catch((e) => {
            _this.$alert("出现未知错误", {
              confirmButtonText: "返回首页",
              callback: (action) => {
                _this.$router.push("/paper");
              },
            });
          });
      } else {
        _this.$alert("id错误", {
          confirmButtonText: "返回首页",
          callback: (action) => {
            _this.$router.push("/paper");
          },
        });
      }
    },
    formatSeconds(theTime) {
      return formatSeconds(theTime);
    },
    questionCompleted(completed) {
      return this.enumFormat(this.doCompletedTag, completed);
    },
    goAnchor(selector) {
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "instant",
        block: "center",
        inline: "nearest",
      });
    },
    initAnswer() {
      let problems = this.form.problems;
      for (let tIndex in problems) {
        this.answer.push({
          answer: undefined,
          questionId: problems[tIndex].id,
          studentId: 1,
          examId: undefined,
        });
        // }
      }
    },
    submitForm() {
      let _this = this;
      console.log("12312", _this.answer);
      finishExam({
        studentId: 1,
        examId: this.$route.query.id,
        answer: _this.answer.map((item) => ({
          answer: item?.answer,
          questionId: item?.questionId,
        })),
      }).then((res) => {
        console.log(res);
      });
      // const alls = this.answer.map((item) => {
      //   return commitPractice(item);
      // });
      // console.log(alls);
      // Promise.all(alls)
      //   .then((re) => {
      //     if (re) {
      //       _this.$alert("考试结束", {
      //         confirmButtonText: "返回首页",
      //         callback: (action) => {
      //           _this.$router.push("/paper");
      //         },
      //       });
      //     } else {
      //       _this.$message.error(re);
      //     }
      //   })
      //   .catch((e) => {
      //     _this.$message.error(e);
      //   });
    },
  },
  computed: {
    totalScore() {
      let sum = 0;
      this.form.records.forEach((item) => {
        sum += item.score;
      });
      return sum;
    },
  },
};
</script>

<style lang="scss" scoped>
.align-center {
  text-align: center;
}

.exam-question-item {
  padding: 10px;

  .el-form-item__label {
    font-size: 15px !important;
  }
}

.question-title-padding {
  padding-left: 25px;
  padding-right: 25px;
}
</style>
